<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户添加</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="userForm" :model="userForm" :rules="rules" label-width="20%">
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="账号名" prop="user_email">
                            <el-input v-model="userForm.user_email" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="用户名" prop="user_name">
                            <el-input v-model="userForm.user_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="部门" prop="user_dept">
                            <el-input v-model="userForm.user_dept"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="手机号" prop="user_phone">
                            <el-input v-model="userForm.user_phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="${boolean}">
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="权限组" >
                            <el-select v-model="userForm.group_ids" multiple filterable placeholder="请选择权限"
                                       style="width: 100%">
                                <el-option v-for="item in options" :key="item.id" :label="item.group_name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('userForm')">确认</el-button>
                    <a onclick="javascript:history.back(-1);">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>

</body>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            //手机格式验证
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                loading:false,
                //表单内容
                userForm: {
                    id: '',
                    user_email: "${bean.user_email}",
                    user_name: "${bean.user_name}",
                    user_dept: "${bean.user_dept}",
                    user_phone: "${bean.user_phone}",
                    group_ids: [],
                    group_id: ''
                },
                options: [],
                //表单字段验证项
                rules: {
                    user_email: [{
                        required: true,
                        message: '请填写账号名',
                        trigger: 'blur'
                    }],
                    user_name: [{
                        required: true,
                        message: '请填写姓名',
                        trigger: 'blur'
                    }],
                    user_dept: [{
                        required: true,
                        message: '请填写部门',
                        trigger: 'blur'
                    }],
                    user_phone: [{
                        validator: checkPhone,
                        trigger: 'blur'
                    }],
                    // group_number: [{
                    //     required: true,
                    //     message: '请选择角色',
                    //     trigger: 'change'
                    // }],
                },
            }
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submitForm(formName) {
                this.loading=true;
                var tempForm = this.userForm;
                this.$refs[formName].validate((valid) =>{
                    if (valid) {
                        var ids = tempForm.group_ids.toString();
                        tempForm.group_id = ids;
                        $.ajax({
                            url: '/user/update.json',
                            type: 'post',
                            data: tempForm,
                            dataType: 'json',
                            success: (result) =>{
                                this.loading=false;
                                if (result.ret) {
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href="/custom/list.page";
                                    }, 1000);
                                }else{
                                    this.$message.error("操作失败，请重试");
                                }
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //初始化得的企业列表
            ajaxFunction() {
                var msg = "";
                var bool = false;
                var resultData = '';
                $.ajax({
                    url: '/role/select.json',
                    type: 'get',
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result.data)
                        if (result.ret) {
                            bool = true;
                            resultData = result.data;
                        }
                    }
                });
                if (bool) {
                    this.options = resultData;
                } else {
                    this.$message({
                        message: '系统异常，权限组列表获取异常，请重试.',
                        type: 'error'
                    });
                }
            },
        },
        async mounted() {
            this.ajaxFunction();
            this.userForm.group_ids = ${groupId};
            this.userForm.id = "${bean.id}";
        }
    })
</script>

</html>